<template>
	<view>
		<!-- 卡密兑换 -->
		<u-sticky bgColor="#fff">
			<view style="width: 100%;">
				<u-tabs :inactiveStyle="{color:'#b4b4b4'}" :activeStyle="{color:'#e76747'}" lineWidth="40"
					:scrollable="false" lineColor="#e76747" :list="tabList" @click="clickTab">
				</u-tabs>
			</view>
		</u-sticky>
		<view v-if="indexTab == '卡密兑换'">
			<view class="text_css">输入兑换码或扫码兑换会员</view>
			<view class="input_css">

				<view style="display: flex;align-items: center;">
					<u--input v-model="key" placeholder="请输入兑换码"></u--input>
					<view style="margin-left: 20rpx;">
						<u-icon name="scan" color="#2979ff" size="36" @click="scancode"></u-icon>
					</view>
				</view>
				<u-gap height="20"></u-gap>
			</view>
			<view v-if="key.length > 0" style="width: 300rpx;margin-left: 225rpx;">
				<u-button type="primary" text="兑换" @click="exchange"></u-button>
			</view>
			<view v-if="key.length == 0" style="width: 300rpx;margin-left: 225rpx;">
				<u-button color="rgb(223, 223, 223)" text="兑换"></u-button>
			</view>

			<u-gap height="150rpx"></u-gap>
			<view class="explanation">兑换说明：</view>
			<view class="explanation">1.输入卡密可在本页面兑换会员，会员可免费看剧</view>
			<view class="explanation">2.卡密兑换后不可撤销</view>
		</view>

		<view v-if="indexTab == '兑换记录'" style="background-color: #f7f7f7;height: 100vh;">
			<u-gap height="10rpx"></u-gap>
			<view v-if="info.length>0">
				<view v-for="(item,index) in info" :key="index"
					style="background-color: #ffffff;margin: 20rpx;padding: 20rpx;border-radius: 20rpx;">
					<view class="listbox">
						<view style="font-size: 30rpx;margin: 10rpx 0;">
							[{{item.type==1?'天卡':(item.type==2?'月卡':(item.type==3?'年卡':'金豆卡'))}}]：{{item._id}}
						</view>
						<u-tag :text="item.type==4?'金豆数:'+item.bean:'时长:'+item.number" type="success" size="mini"></u-tag>
					</view>
					<u-line></u-line>
					<view style="font-size: 24rpx;margin: 10rpx 0;color: #888888;">
						兑换时间：{{item.used_time| date('yyyy-mm-dd hh:MM:ss')}}</view>

				</view>
			</view>
			<view v-else>
				<u-empty mode="history" icon="http://cdn.uviewui.com/uview/empty/history.png" text="无兑换记录">
				</u-empty>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [{
						name: '卡密兑换'
					},
					{
						name: '兑换记录'
					}
				],
				key: "", //兑换码
				indexTab: '卡密兑换',
				info: []
			}
		},
		onShow() {

		},
		methods: {
			async exchange() {
				vk.callFunction({
					url: 'client/user/kh/exchange_cdkey',
					title: '请求中...',
					data: {
						key: this.key
					},
					success: (data) => {
						console.log("data=", data);
						if (data.tip) {
							uni.showModal({
								title: "错误提示",
								content: data.tip,
								showCancel: false,
								confirmText: "确认"
							})
							return;
						}
						let keyinfo = data.keyinfo.data[0];
						console.log("102====》", data.keyinfo.data[0].type);
						console.log("103====》", keyinfo.type);
						if (keyinfo.type == 4) {
							uni.showModal({
								title: "兑换成功",
								content: "您已成功兑换" + keyinfo.bean + "金豆",
								showCancel: false,
								confirmText: "确认",
								success: function(res) {
									if (res.confirm) {
										uni.switchTab({
											url: "/pages/Tabbar/my/my"
										})
									}
								}
							})
							return
						}
						let unit = "天"; //默认是天卡
						if (keyinfo.type == 2) {
							unit = "月";
						}
						if (keyinfo.type == 3) {
							unit = "年";
						}
						uni.showModal({
							title: "兑换成功",
							content: "您已成功兑换" + keyinfo.number + unit + "会员",
							showCancel: false,
							confirmText: "确认",
							success: function(res) {
								if (res.confirm) {
									uni.switchTab({
										url: "/pages/Tabbar/my/my"
									})
								}
							}
						})
					}
				});
			},
			scancode() {
				let that = this;
				// 允许从相机和相册扫码
				uni.scanCode({
					success: function(res) {
						that.key = res.result;
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			},
			clickTab(item) {
				this.indexTab = item.name
				if (item.name == "兑换记录") {
					vk.callFunction({
						url: 'client/user/kh/getCdkeyExchangeHistory',
						title: '请求中...',
						data: {

						},
						success: (data) => {
							console.log("data=", data);
							this.info = data.list.data;
						}
					});
				}
			}
		}
	}
</script>

<style>
	.text_css {
		text-align: center;
		margin-top: 60rpx;
		font-size: 30rpx;
	}

	.input_css {
		margin: 40rpx 60rpx;
	}

	.listbox {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.explanation {
		color: #888;
		font-size: 22rpx;
		line-height: 40rpx;
		margin-left: 20rpx;
	}
</style>
